<template>
  <div id="main"></div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";
import * as echarts from "echarts";
import { createWebSocket } from "../config/help/heartbeat";

export default defineComponent({
  mounted() {
    createWebSocket("ws://192.168.10.254:5000/ws?Gpio=32&Gpio1=28", (evt) => {
      datamsg = evt.data;
    });
    var datamsg;
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    var now;
    function randomData() {
      let timenow = Date.now();

      now = timenow; //.getMinutes() + ":" + timenow.getSeconds()+;
      return {
        name: now.toString(),
        value: [now, datamsg],
      };
    }
    let data = [];

    option = {
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          return params[0].data.value[1];
        },
        axisPointer: {
          animation: false,
        },
      },
      xAxis: {
        type: "category",
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: "Fake Data",
          type: "line",
          showSymbol: false,
          data: data,
          smooth: true,
        },
      ],
    };
    setInterval(function () {
      if (data.length > 100) {
        data.shift();
      }
      data.push(randomData());
      myChart.setOption({
        series: [
          {
            data: data,
          },
        ],
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false,
          },
        },
      });
    }, 100);

    option && myChart.setOption(option);
  },
});
</script>

<style>
#main {
  width: 80%;
  height: 25vh;
}
</style>